<template>
    <div>
      <div class="first-step">
        直接调用store的state中show的值：{{$store.state.isShow}}<br>
        这是state中change的值：{{$store.state.change}}
      </div>
      <div class="second-step">
        <button @click="changeShow">show</button>
        <button @click="isChange">change</button>
      </div>
      <div>
        <store-component></store-component>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import StoreComponent from './components/store-component'
  export default {
      name: '',
      components: {
        StoreComponent
      },
      data() {
          return {
            state: true,
            num: 0
          }
      },
      mounted() {
      },
      methods: {
        changeShow() {
          this.state = !this.state
          if (this.state) {
            this.$store.dispatch('showValue')
          } else {
            this.$store.dispatch('hideValue')
          }
        },
        isChange() {
          this.$store.commit('changeNum',1)
        }
      }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>

</style>
